import React from 'react';
import cx from 'classnames'
import style from './style.field';
import Tooltip from '../tooltip';


class FieldBox extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'FieldBox';
  }
  render() {
    const {
      label,
      labelWidth,
      name,
      required,
      tip
    } = this.props;
    const props= {};
    if(labelWidth) {
      props.style = {
        width: typeof labelWidth === 'number' ? `${labelWidth}px` : labelWidth
      }
    }
    return (
      <div data-role={'fieldArea'} className={cx(
        style['field-area'],
        {
          [this.props.className]: this.props.className
        }
      )}>
        {label ? (<label className={style['field-label']} htmlFor={name} {...props} >
          {required ? <i>* </i> : null}{label}{tip ? <Tooltip tip={tip}/> : null}
        </label>) : null}
        {this.props.children}
      </div>
    );
  }
}

export default FieldBox;
